<template>
  <section class="conversation-list-panel-container bd-right">
    <SearchComp></SearchComp>
    <div class="panel">
      <ConversationListView class="conversation-list-container" />
    </div>
  </section>
</template>

<script>
import ConversationListView from './conversationList/ConversationListView.vue'
import store from '../../store'
import SearchView from './search/SearchView.vue'
import SearchComp from '@/kang/components/SearchComp.vue'

export default {
  name: 'ConversationListPanel',
  data() {
    return {
      sharedSearchState: store.state.search,
    }
  },

  methods: {},
  components: {
    ConversationListView,
    SearchView,
    SearchComp,
  },
}
</script>

<style lang="css" scoped>
.conversation-list-panel-container {
  display: flex;
  flex-direction: column;
}

.panel {
  height: calc(100% - 51px);
  position: relative;
  background-color: var(--color-white);
  overflow-y: auto;
  flex: 1;
}

.search-result-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
</style>
